<template>
  <div class="enrollPayMoneyContainer">
    <div
      class="dialog animated"
      :class="open ? 'fadeIn' : 'fadeOut'"
      v-show="show"
      :style="{ visibility: visible ? 'visible' : 'hidden' }"
    >
      <div class="panel animated" :class="open ? 'zoomIn' : ''">
        <div class="title">
          毕业\离园
          <div class="close" @click="cancel()"></div>
        </div>
        <div style="padding-left:0.3rem;">
          <div style="margin-bottom:0.1rem;">
            <el-radio v-model="radio" :label="1">毕业</el-radio>
          <el-radio v-model="radio" :label="2">离园</el-radio>
          </div>
          <div style="margin-bottom:0.1rem;">请选择毕业\离园学员</div>
          <div style="margin-bottom:0.1rem;">2019-2020学年</div>
          <el-tree
            :data="data"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :props="defaultProps"
          ></el-tree>
        </div>
        <div class="btn_div">
          <div class="btn_cancel" @click="cancel()">取消</div>
          <div class="btn_sure" @click="nextStep()">下一步</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var vm, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      visible: false,
      isAdd: true,
      radio: 1,
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 11);
    },
    nextStep(){
      vm.$emit("nextStep", "");
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      vm.isAdd = true;
      vm.$emit("cancel", "");
      setTimeout(function() {
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style lang="scss">
</style>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.panel{
  width:6rem;
}
</style>





